大家好，我是烏木白，今天要和大家介紹 Mixin 和 RWD 搭配該如何使用？

原本 RWD 寫法

.header {
    font-size: 15px;
}

@media(max-width:768px){
    .header {
    font-size: 15px;
    }
}

@media(max-width:568px){
    .header {
    font-size: 13px;
    }
}

大多數我們在寫 RWD的時候都是這樣寫，但是在程式碼很多的時候，你會覺得很亂之外，還要每次一直重複寫斷點的語法，在我還沒學習 Sass 的時候怎麼辣麼麻煩，但是學習 Sass 之後感覺眼睛亮了起來！

搭配 Mixin 寫法

@mixin pad {
    @media(max-width:768px){
        @content
    }
}

@mixin phone {
    @media(max-width:568px){
        @content
    }
}

.header {
    width:500px;
    @include pad {
        width:300px;
    }
}

為什麼要這樣寫，原因是這樣可以增加你的可讀性，像我一開始自己學習 RWD 是在最後才寫，每次都要雙開螢幕或者是一隻滑上滑下，這樣浪費了很多時間，是因為這次參加了六角學院的切版直播班，才知道原來 RWD 是建議在寫完每一個部分，就直接設定，而不要留到最後在寫，因為可能會全部都改變！

大家記得要多練習喔～